<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>
<style scoped>
.ivu-tabs {
  overflow: visible;
}
.card-title {
  display: flex;
  justify-content: space-between;
  height: 24px;
  line-height: 24px;
  overflow: visible;
}
.echarts {
  width: 100%;
  height: 100%;
}
.app-index {
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  margin-top: 4px;
  font-size: 12px;
  color: #888;
  margin-right: 20px;
}
.app-container:nth-child(1) .app-index {
  background: gold;
  border: none;
  color: white;
}
.app-container:nth-child(2) .app-index {
  background: silver;
  border: none;
  color: white;
}
.app-container:nth-child(3) .app-index {
  background: chocolate;
  border: none;
  color: white;
}
.app-name {
  width: calc(50% - 20px);
}
.app-type {
  width: calc(25% - 10px);
}
.app-value {
  width: calc(25% - 10px);
}
.warning-name {
  width: calc(40% + 20px);
}
.warning-type {
  width: calc(30% - 10px);
}
.warning-value {
  width: calc(30% - 10px);
}
.app-table,
.event-table {
  overflow-x: hidden;
}
</style>

<template>
    <div class="home-main" style="height: calc(100vh - 20px);">
        <Row :gutter="10">
            <Col :md="16" :lg="16">
                <Row :gutter="10" style="height: 112px">
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="user_created_count"
                            :end-val="count.portalRatio"
                            iconType="android-desktop"
                            color="#2d8cf0"
                            :sub-text="count.portalStat"
                            intro-text="Portal成功率"
                            percent
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="visit_count"
                            :end-val="count.aaaRatio"
                            iconType="key"
                            color="#64d572"
                            :iconSize="50"
                            :sub-text="count.aaaStat"
                            intro-text="认证成功率"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="collection_count"
                            :end-val="count.DNSRatio"
                            iconType="cloud"
                            color="#ff9900"
                            :sub-text="count.DHCPStat"
                            intro-text="DHCP成功率"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="transfer_count"
                            :end-val="count.DNSRatio"
                            iconType="steam"
                            color="#f25e43"
                            :sub-text="count.DNSStat"
                            intro-text="DNS成功率"
                        ></infor-card>
                    </Col>
                </Row>
                <Row style="height: calc(60vh - 79.2px)" :gutter="10">
                    <Col :md="24" :lg="24">
                        <Card :padding="0">
                            <p slot="title" class="card-title">
                                <span> <Icon type="iphone"></Icon> 整体性能 </span>
                                <Tabs v-model="panelMode.genernal" type="card">
                                    <TabPane label="有线终端" name="lan-num"></TabPane>
                                    <TabPane label="有线吞吐" name="lan-data"></TabPane>
                                    <TabPane label="无线终端" name="wifi-num"></TabPane>
                                    <TabPane label="无线吞吐" name="wifi-data"></TabPane>
                                </Tabs>
                            </p>
                            <div style="height: calc(60vh - 140.2px)">
                                <chart v-if="panelMode.genernal==='lan-num'" :options="numLanOption" auto-resize></chart>
                                <chart v-if="panelMode.genernal==='lan-data'" :options="dataAmountLanOption" auto-resize></chart>
                                <chart v-if="panelMode.genernal==='wifi-num'" :options="numWifiOption" auto-resize></chart>
                                <chart v-if="panelMode.genernal==='wifi-data'" :options="dataAmountWifiOption" auto-resize></chart>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Col>
            <Col :md="8" :lg="8" style="height: calc(60vh + 32.8px)">
                <Row>
                    <Card :padding="0">
                        <p slot="title" class="card-title">
                            <span><Icon type="android-warning"></Icon> 当前事件</span>
                        </p>
                        <div style="height: calc(30vh - 46px); padding: 12px; overflow-y: scroll" class="event-table">
                            <div v-for="item,index in eventList" class="app-container">
                                <div style="display: flex; justify-content: space-between; line-height: 2; padding: 0 24px">
                                    <span class="warning-name" style=""><a :href="`#/event-check/${item.name}`">{{item.name}}</a></span>
                                    <span class="warning-type">{{item.type}}</span>
                                    <span>优先级: <span class="warning-value" :style="{color: colorDict[item.priority]}">{{item.priority}}</span></span>
                                </div>
                            </div>
                        </div>
                    </Card>
                </Row>
                <Row style=" margin-top: 10px;">
                    <Card :padding="0">
                        <p slot="title" class="card-title">
                            <span> <Icon type="location"></Icon> 今日热门地点 </span>
                            <Tabs v-model="panelMode.location" type="card">
                                <TabPane label="楼宇" name="building"></TabPane>
                                <TabPane label="教室" name="room"></TabPane>
                            </Tabs>
                        </p>
                        <div style="height: calc(30vh - 46px); padding: 12px; overflow-y: scroll" class="app-table">
                            <div v-for="item,index in (panelMode.location==='building' ? AppList : RoomList )" :key="item.name" class="app-container">
                                <div style="display: flex; justify-content: space-between; line-height: 2; padding: 0 24px">
                                    <span class="app-index">{{index+1}}</span>
                                    <span class="app-name" style=""><a>{{item.name}}</a></span>
                                    <span class="app-value">{{item.value}}</span>
                                </div>
                            </div>
                        </div>
                    </Card>
                </Row>
            </Col>
        </Row>
        <Row :gutter="10" style="height: calc(60vh - 79.2px)">
            <Col :md="16" :lg="16" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <span><Icon type="android-wifi"></Icon> 噪声水平</span>
                        <Tabs v-model="panelMode.noise" type="card">
                            <TabPane label="高噪声Radio比例" name="high-noise"></TabPane>
                            <TabPane label="平均噪声" name="avg-noise"></TabPane>
                        </Tabs>
                    </p>
                    <div style="height: calc(60vh - 146.4px)">
                        <chart v-if="panelMode.noise==='high-noise'" :options="highNoiseOption" auto-resize></chart>
                        <chart v-if="panelMode.noise==='avg-noise'" :options="avgNoiseOption" auto-resize></chart>
                    </div>
                </Card>
            </Col>
            <Col :md="8" :lg="8">
                <Card>
                    <p slot="title" class="card-title">
                        <span><Icon type="calendar"></Icon> 近三月故障情况</span>
                        <Tabs v-model="panelMode.alert" type="card">
                            <TabPane label="报障" name="create-alert"></TabPane>
                            <TabPane label="解决" name="solve-alert"></TabPane>
                        </Tabs>
                    </p>
                    <div style="height: calc(60vh - 146.4px)">
                        <chart v-if="panelMode.alert==='create-alert'" :options="calendarOption" auto-resize></chart>
                        <chart v-if="panelMode.alert==='solve-alert'" :options="calendarSolveOption" auto-resize></chart>
                    </div>
                </Card>
            </Col>
        </Row>
        <Row :gutter="10">
            <Col :md="16" :lg="16" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <span><Icon type="ios-pulse-strong"></Icon> 信道占用</span>
                        <Tabs v-model="panelMode.channel" type="card">
                            <TabPane label="信道繁忙Radio比例" name="busy-channel"></TabPane>
                            <TabPane label="平均占用" name="avg-channel"></TabPane>
                        </Tabs>
                    </p>
                    <div style="height: calc(60vh - 146.4px)">
                        <chart v-if="panelMode.channel==='busy-channel'" :options="busyChannelOption" auto-resize></chart>
                        <chart v-if="panelMode.channel==='avg-channel'" :options="avgChannelOption" auto-resize></chart>
                    </div>
                </Card>
            </Col>
            <Col :md="8" :lg="8">
                <Card>
                    <p slot="title" class="card-title">
                        <span><Icon type="pie-graph"></Icon> 近三月故障原因</span>
                    </p>
                    <div style="height: calc(60vh - 146.4px)">
                        <chart :options="eventTypeOption" auto-resize></chart>
                    </div>
                </Card>
            </Col>
        </Row>
        <!-- <Row :gutter="10">
            <Col :md="16" :lg="16" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <span><Icon type="ios-pulse-strong"></Icon> 服务器性能</span>
                        <Tabs v-model="panelMode.channel" type="card">
                            <TabPane label="CPU占用" name="busy-channel"></TabPane>
                            <TabPane label="内存占用" name="avg-channel"></TabPane>
                        </Tabs>
                    </p>
                    <div style="height: calc(60vh - 146.4px)">
                        <chart v-if="panelMode.channel==='busy-channel'" :options="busyChannelOption" auto-resize></chart>
                        <chart v-if="panelMode.channel==='avg-channel'" :options="avgChannelOption" auto-resize></chart>
                    </div>
                </Card>
            </Col>
        </Row> -->
    </div>
</template>

<script>
// import { radioTypeOption } from "./data/pie/radio";
// import { deviceTypeOption } from "./data/pie/client-type";
import { eventTypeOption } from "./data/pie/event-type";
// import { SNROption } from "./data/pie/SNR";

import { numLanOption } from "./data/general/num-lan";
import { numWifiOption } from "./data/general/num-wifi";
import { dataAmountLanOption } from "./data/general/data-lan";
import { dataAmountWifiOption } from "./data/general/data-wifi";
import { highNoiseOption } from "./data/noise/high-noise";
import { avgNoiseOption } from "./data/noise/avg-noise";
import { busyChannelOption } from "./data/channel/busy-channel";
import { avgChannelOption } from "./data/channel/avg-channel";
import { calendarOption } from "./data/calendar/create";
import { calendarSolveOption } from "./data/calendar/solve";

import countUp from "./components/countUp.vue";
import inforCard from "./components/inforCard.vue";

export default {
  name: "home",
  components: {
    countUp,
    inforCard
  },
  data() {
    return {
      panelMode: {
        genernal: "lan-num",
        noise: "high-noise",
        channel: "busy-channel",
        alert: "create-alert",
        location: "building"
      },
      colorDict: { 高: "#ed3f14", 中: "#ff9900", 低: "forestgreen" },
      calendarOption,
      calendarSolveOption,
      numLanOption,
      numWifiOption,
      dataAmountLanOption,
      dataAmountWifiOption,
      highNoiseOption,
      avgNoiseOption,
      busyChannelOption,
      avgChannelOption,
      eventTypeOption,
      AppList: [
        { name: "1号教学楼", value: 3814 },
        { name: "2号食堂", value: 1814 },
        { name: "8号食堂", value: 1431 },
        { name: "4号食堂", value: 581 },
        { name: "41号宿舍", value: 580 },
        { name: "综合实验楼", value: 573 },
        { name: "北区图书馆", value: 3814 },
        { name: "南区图书馆", value: 3814 },
        { name: "综合体育馆", value: 3814 },
        { name: "行政楼", value: 3814 }
      ],
      RoomList: [
        { name: "1号教学楼201", value: 3814 },
        { name: "1号教学楼204", value: 1814 },
        { name: "3号教学楼206", value: 1431 },
        { name: "1号教学楼511", value: 581 },
        { name: "1号教学楼421", value: 580 },
        { name: "5号教学楼121", value: 573 },
        { name: "5号教学楼401", value: 3814 },
        { name: "3号教学楼204", value: 3814 },
        { name: "3号教学楼209", value: 3814 },
        { name: "4号教学楼101", value: 3814 }
      ],
      eventList: [
        { name: "SLR01-WIFI-IT1a", priority: "高", type: "无法连接" },
        { name: "SLR01-WIFI-IT1a", priority: "高", type: "无法连接" },
        { name: "SLR01-WIFI-IT1a", priority: "中", type: "无法连接" },
        { name: "SLR01-WIFI-IT1a", priority: "中", type: "无法连接" },
        { name: "SLR01-WIFI-IT1a", priority: "低", type: "无法连接" },
        { name: "SLR01-WIFI-IT1a", priority: "低", type: "无法连接" }
      ],
      count: {
        portalRatio: 0.99,
        portalStat: "481ms",
        aaaRatio: 0.491,
        aaaStat: "2181ms",
        DHCPRatio: 0.9512,
        DHCPStat: "941ms",
        DNSRatio: 0.9318,
        DNSStat: "311ms"
      }
    };
  },
  computed: {
    avatorPath() {
      return localStorage.avatorImgPath;
    }
  },
  methods: {
    addNewToDoItem() {
      this.showAddNewTodo = true;
    },
    addNew() {
      if (this.newToDoItemValue.length !== 0) {
        this.toDoList.unshift({
          title: this.newToDoItemValue
        });
        setTimeout(() => {
          this.newToDoItemValue = "";
        }, 200);
        this.showAddNewTodo = false;
      } else {
        this.$Message.error("请输入待办事项内容");
      }
    },
    cancelAdd() {
      this.showAddNewTodo = false;
      this.newToDoItemValue = "";
    }
  }
};
</script>
